@import '@influxdata/clockface/dist/variables.scss';
@import '~src/notebooks/NotebookVariables.scss';

.notebook-divider {
  position: absolute;
  bottom: 0;
  left: 0;
  width: $notebook-panel--node-gap;
  height: $notebook-panel--node-gap;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 2;

  &:hover {
    cursor: pointer;
  }
}

.notebook-panel:hover .notebook-divider,
.notebook-panel:last-child .notebook-divider,
.notebook-divider__popped {
  opacity: 1;
}

.notebook-panel:last-child .notebook-divider {
  transform: translateY(100%);
}

.notebook-panel:last-child .notebook-divider:after {
  content: '';
  width: $cf-border;
  position: absolute;
  left: 50%;
  top: 5px;
  height: 150%;
  transform: translate(-50%, -100%);
  @include gradient-v($g5-pepper, $c-amethyst);
}

.notebook-panel__hidden.notebook-panel:last-child .notebook-divider:after {
  height: 50%;
}

.notebook-divider--button {
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;

  &:after {
    border-radius: 50%;
  }
}

.insert-cell-menu {
  padding: $cf-marg-b;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 14px;
}

.insert-cell-menu--title {
  text-align: center;
  font-weight: $cf-font-weight--medium;
  margin-top: 0;
  margin-bottom: $cf-marg-b !important;
  user-select: none;
}
